import React, { useEffect, useState } from 'react';
const MouseTracker: React.FC = () => {
  const [positions, setPositions] = useState({x: 0, y: 0});
  // react会在组件卸载的时候执行清除操作
  useEffect(() => {
    // 没有调用add effect
    console.log('add effect', positions.x);
    const updateMouse = (e: MouseEvent) => {
      // 每次更新都会调用useEffect
      // 不清除操作的时候会创建多个监听函数 inner不是线性出现的
      // 清除操作之后每次只有一个监听函数，点击一次只出现一个inner
      console.log('inner');
      setPositions({x: e.clientX, y: e.clientY})
    }
    document.addEventListener('click', updateMouse)
    // 可以返回一个函数 完成清除的操作
    return () => {
      console.log('remove effect', positions.x);
      document.removeEventListener('click', updateMouse)
    }
    // 只有第一次渲染的时候执行useEffect
    // eslint-disable-next-line
  }, []);
  console.log('before render', positions.x);
  return (
    <p>
      X: {positions.x},
      Y: {positions.y}
    </p>
  );
}
export default MouseTracker;